<template>
    <div v-if="property" class="enum-edit">
        <template v-if="['colorPicker', 'ColorPicker'].indexOf(property.widget) !== -1">
            <el-color-picker v-model="colorValue" style="vertical-align: middle;" @change="colorEnumPush"></el-color-picker>
            <div class="color-enum">
                <span v-for="(color, index) in (property.enum || [])" :key="index" :style="{ backgroundColor: color }">
                    <i class="color-enum-icon el-icon-remove" @click.self="colorEnumRemove(index)"></i>
                </span>
            </div>
        </template>
        <template v-else>
            <el-row>
                <el-col :span="12">
                    <div class="explain">
                        <p class="titie">数据源</p>
                        <Vue2AceEditor ref="editor" v-model="content" @init="editorInit" v-bind="editorConfig"></Vue2AceEditor>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="explain">
                        <p class="titie">字段说明</p>
                        <el-table :data="explainCode" border size="mini" style="width: 100%">
                            <el-table-column prop="prop" label="字段"></el-table-column>
                            <el-table-column prop="required" label="必须">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.required" style="color: red;">是</span>
                                    <span v-else>否</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="explain" label="说明"></el-table-column>
                            <el-table-column prop="type" label="类型"></el-table-column>
                            <el-table-column prop="optional" label="可选值"></el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </template>
    </div>
</template>

<script>
import Vue2AceEditor from 'vue2-ace-editor'
import { enumExplain } from '@/components/utils/enum-explain'

export default {
    name: 'VoDragFormPropertyEditEnum',
    components: {
        Vue2AceEditor
    },
    props: {
        property: Object
    },
    data() {
        return {
            colorValue: '',
            content: '',
            enum: [],
            editor: null,
            editorConfig: {
                lang: 'json',
                theme: 'chrome',
                height: 600
            },
            explainCodeMap: {
                ...enumExplain
            }
        }
    },
    computed: {
        explainCode() {
            if (!this.property) return [];
            return this.explainCodeMap[this.property.widget] || []
        }
    },
    created() {
        if (this.property) {
            this.setValue(this.property.enum)
        }
    },
    methods: {
        colorEnumPush() {
            if (this.property) {
                if (!Array.isArray(this.property.enum)) {
                    this.$set(this.property, 'enum', [])
                }
                this.property.enum.push(this.colorValue)
            }
        },
        colorEnumRemove(index) {
            if (this.property) {
                this.property.enum.splice(index, 1)
            }
        },
        editorInit(editor) {
            this.editor = editor;
            require('brace/ext/language_tools')
            // 设置语言
            require('brace/mode/json')
            require('brace/snippets/json')
            // 设置主题
            require('brace/theme/monokai')
            require('brace/theme/chrome')
            require('brace/theme/crimson_editor')

            editor.setFontSize(14)
            editor.getSession().setTabSize(4)
            editor.getSession().setOptions({
                fontFamily: 'tahoma',
                fontSize: '10pt'
            })
            // 监听值的变化
            // editor.getSession().on('change', val => {
            //     console.log(editor.getValue());
            // })
        },
        setValue(value) {
            this.content = JSON.stringify(value || [], null, 2)
        }
    }
}
</script>

<style lang="scss" scoped>
.enum-edit{}
.color-enum{
    line-height: 0;
    span{
        display: inline-block;
        position: relative;
        width: 30px;
        height: 30px;
        margin-top: 16px;
        margin-right: 16px;
        border-radius: 4px;
        border: 1px solid #E4E7ED;
        .color-enum-icon{
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
            cursor: pointer;
            color: #F56C6C;
            border-radius: 100%;
            font-size: 18px;
            background: #FFFFFF;
            &:hover{
                background: #F56C6C;
                color: #FFFFFF;
            }
        }
    }
}
.explain{
    width: '50%';
    .titie{
        font-size: 14px;
        padding-left: 10px;
        margin-bottom: 10px;
        color: #606266;
    }
}
</style>
